<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户姓名：" prop="userName">
              <el-input v-model="search.userName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工门禁号：" prop="employeeNo">
              <el-input v-model="search.employeeNo" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="打卡类型：" prop="signType">
              <el-select v-model="search.signType" placeholder="请选择">
                <el-option
                  v-for="item in controlData.signTypes"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="打卡时间：" prop="signTime">
              <el-date-picker
                style="width: 180px"
                @change="datetimerangeChange"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="search.signTime"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数据源：" prop="dataSource">
              <el-select v-model="search.dataSource" placeholder="请选择">
                <el-option
                  v-for="item in controlData.dataSources"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      menuType="text"
      keyProp="recordId"
      formRefs="recordForm"
      :data="query"
      :showCheckbox="false"
      :showToolbar="false"
      :showMenu="false"
      :isCustomForm="true"
    >
      <qm-table-column field="createdUserName">用户姓名</qm-table-column>
      <qm-table-column field="employeeNo">员工门禁号</qm-table-column>
      <qm-table-column field="recordType" :renderFunc="renderRecordType">记录类型</qm-table-column>
      <qm-table-column field="signType" :renderFunc="renderSignType">打卡类型</qm-table-column>
      <qm-table-column field="datasource" :renderFunc="renderDatasource">数据源</qm-table-column>
      <qm-table-column field="signTime">打卡时间</qm-table-column>
      <qm-table-column field="createdTime">创建时间</qm-table-column>
    </qm-table>
  </div>
</template>

<script>
  import Controller from "@/libs/framework/controller";

  export default class Instance extends Controller {
    onBeforeInit() {
      this.urls = {
        model: "/eip/sign/record/getListModel",
        query: "/eip/sign/record/query",
      }
    }

    mixin() {
      return {
        data() {
          return {};
        },
        methods: {
          datetimerangeChange(e) {
            this.search.startTime = e[0];
            this.search.endTime = e[1];
          },
          renderRecordType(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.recordTypes,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          },
          renderSignType(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.signTypes,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          },
          renderDatasource(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.dataSources,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          }
        },
      };
    }
  }
</script>

<style scoped>

</style>
